<template>
  <div class="team-card van-hairline--bottom">
    <div class="left-col">
      <div class="head-img">
        <img :src="item.icon || default_icon" />
      </div>
      <div class="team-info">
        <div class="row-1">
          <span class="phone">{{item.phone || item.nickname}}</span>
        </div>
        <div class="row-2">
          <span>{{item.levelName}}</span>
          <span class="name">{{formatDate(item.createTime)}}</span>
        </div>
        <div class="row-3">团队:{{item.teams}} 直属:{{item.directTeams}} 订单数:{{item.orders}}</div>
      </div>
    </div>
    <div class="right-col" v-show="item.teams || item.directTeams">
      <van-icon name="arrow" />
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { format } from "@/utils/util";
import { Sticky, Icon } from "vant";
Vue.use(Sticky).use(Icon);
export default {
  data() {
    return {
      default_icon: require('@/view/user/imgs/default_headImg.png')
    }
  },
  props: {
      item:{
        type: Object,
        default: () => {}
      }
  },
  methods: {
    formatDate(time) {
      return format(time, "yyyy-MM-dd");
    },
  }
};
</script>
<style lang="scss" scoped>
.team-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 15px;
  .left-col {
    display: flex;
    align-items: center;
  }
  .head-img {
    width: 60px;
    height: 60px;
    background: #eee;
    border-radius: 50%;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .team-info {
    margin-left: 10px;
    .phone {
      font-size: 14px;
      margin-right: 5px;
    }
    .row-2 {
      margin: 5px 0;
      .name {
        margin-left: 5px;
        color: #999;
      }
    }
    .vip {
      display: inline-block;
      padding: 0 4px;
      border-radius: 8px;
      color: #895c29;
      background: #fbe5ae;
    }
  }
  .right-col {
    float: right;
  }
}
</style>